<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
        <title></title>
        <style>
            .lds-ring {
                display: inline-block;
                position: relative;
                width: 64px;
                height: 64px;
            }
            .lds-ring div {
                box-sizing: border-box;
                display: block;
                position: absolute;
                width: 51px;
                height: 51px;
                margin: 6px;
                border: 6px solid #fff;
                border-radius: 50%;
                animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                border-color: #fff transparent transparent transparent;
            }
            .lds-ring div:nth-child(1) {
                animation-delay: -0.45s;
            }
            .lds-ring div:nth-child(2) {
                animation-delay: -0.3s;
            }
            .lds-ring div:nth-child(3) {
                animation-delay: -0.15s;
            }
            @keyframes lds-ring {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            * {
                padding: 0;
                -webkit-appearance:none;
            }
        
        html,body { margin:0;padding:0;text-align:center;background-color:#1c1f28;color:#ffffff;width:100%;height:100%;
                font-family:adobe-clean,Helvetica,Arial,sans-serif;
                font-weight: normal;
                font-size: .875rem;
                -webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
        }
        .header {
            margin-top:40px;
            font-weight: bolder;
            font-size: 30px;
        }
        .subheader {
            margin-top:16px;
            font-size:16px;
        }
        .errormessageheader {
            margin-top:16px;
            font-size:23px;
            color:#f90025;
        }
        .digitinputframe {
            margin-top:5px;
            margin-bottom:5px;
            position: relative;
            display: inline-block;
        }
        .digitinput {
            background-color: #1c1f28;
            border-color: #ffffff;
            color: #ffffff;
            border-bottom: 2px solid #ffffff;
            border-top: none;
            border-left: none;
            border-right: none;
            margin-right: 14px;
            margin-left: 14px;
            font-size: 30px;
            font-weight: normal;
            width: 33px;
            height: 40px;
            display:inline-block;
            position:relative;
        }
        
        input[type=button].primary {
            display: inline-block;
            border-color: #ffffff;
            border-width: 2px;
            border-style: solid;
            border-radius: 32px;
            background-color: #1c1f28;
            color:#fff;
            font-size: 25px;
            font-weight: normal;
            box-shadow: none;
            text-decoration: none;
            width: 64px;
            height: 64px;
            margin: 4px;
        }

        input[type=button].backspace {
            display: inline-block;
            background: url()
            no-repeat left center;
            background-size: 100%;
            border-style: none;
            background-color: #1c1f28;
            color:#fff;
            font-size: 25px;
            font-weight: normal;
            box-shadow: none;
            text-decoration: none;
            width: 64px;
            height: 64px;
            margin: 4px;
        }
        
        input[type=button]:active {
            background-color: #575a61;
        }

        input[type=button].action {
            display: inline-block;
            border-style: none;
            background-color: #1c1f28;
            color:#fff;
            font-size: 20px;
            font-weight: normal;
            -webkit-tap-highlight-color: rgba(0,0,0,0.4);
            box-shadow: none;
            text-decoration: none;
            margin: 8px;
        }
        
        input[type=button].primaryDisabled {
            border-color: transparent;
            background-color: #393939;
            font-size: 15px;
            font-weight: bold;
            color:#5a5a5a;
            text-decoration: none;
            border-radius: 16px;
            width:40px;
            height:40px;
        }
        
        .blankbutton {
            width: 40px;
            height: 40px;
            display:inline-block;
            padding:0px
            margin: 0px;
        }
        
        .btnrow {
            padding-bottom:5px;
        }

        .actionrow {
            position: absolute;
            width: 100%;
            bottom: 10px;
        }
        
        /* conditionals to handle iphone 5/6 */
        @media (min-height:650px) {
            .header {margin-top: 64px;}
            .subheader {margin-top: 16px;}
            .digitinputframe {margin-top: 40px;margin-bottom:20px;}
            input[type=button].primary {margin: 8px;}
            input[type=button].backspace {margin: 8px;}
            .actionrow { bottom: 30px; }
        }
        </style>
    </head>
    <body>
        <div class="header">
            Assurance
        </div>
        <div id="pinentrydiv">
            <div class="subheader">
                Enter the 4 digit PIN to continue
            </div>
            <div class="digitinputframe">
                <div class="digitinput" id="digit0">&nbsp;</div>
                <div class="digitinput" id="digit1">&nbsp;</div>
                <div class="digitinput" id="digit2">&nbsp;</div>
                <div class="digitinput" id="digit3">&nbsp;</div>
            </div>
            <div style="margin-top:15px">
                <div class="btnrow">
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="1" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="2" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="3" />
                </div>
                <div class="btnrow">
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="4" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="5" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="6" />
                </div>
                <div class="btnrow">
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="7" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="8" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="9" />
                </div>
                <div class="btnrow">
                    <input type="button" class="primary" style="visibility: hidden;" onclick="pushBtn(this.value);" value="CE" />
                    <input type="button" class="primary" onclick="pushBtn(this.value);" value="0" />
                    <input type="button" class="backspace" onclick="pushBtn('<');" value="&nbsp;" />
                </div>
            </div>
        </div>
            
        <div class="digitinputframe" id="loaderdiv" style="display:none;">
            <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
            <div class="subheader">
                Connecting...
            </div>
        </div>
            
        <div class="digitinputframe" id="errordiv" style="display:none;">
            <div class="errormessageheader" id="errormessageheader">
            </div>
            <br>
            <div class="subheader" id = "errormessagedescription">
                This error may be due to an incorrect pin code or network issue.  Please verify your pin-code and try again.
            </div>
        </div>

        <div class="actionrow">
            <div style="width:50%;float:left;overflow:hidden;">
                <input type="button" class="action" onclick="cancel();" value="Cancel" />
            </div>
            <div style="width:50%;float:right;overflow:hidden;">
                <input id="btnConnect" type="button" class="action" style="display:none;" onclick="connect();" value="Connect" />
                <input id="btnRetry" type="button" class="action" style="display:none;" onclick="retry();" value="Retry" />
            </div>
        </div>
                
        <script type="text/javascript">
            document.addEventListener("touchstart", function(){}, true);
            var codestring = '';
            
            function pushBtn(btnText) {
                switch(btnText) {
                    case '<':
                    if (codestring.length > 0) {
                        codestring = codestring.slice(0,codestring.length-1);
                    }
                    break;
                    default:
                    if (codestring.length < 4) {
                        codestring = codestring + btnText;
                    }
                }
                
                updateText();
            }
        
            function updateText() {
                for (var i = 0; i < codestring.length; i++) {
                    document.getElementById("digit" + i).innerHTML = codestring.slice(i,i+1);
                }
                
                for (var i = codestring.length; i < 4; i++) {
                    document.getElementById("digit" + i).innerHTML = '&nbsp;';
                }
                
                hideElement("btnRetry");

                if (codestring.length == 4) {
                    showElement("btnConnect");
                } else {
                    hideElement("btnConnect");
                }
            }
            
            function showLoading() {
                showElement("loaderdiv");
                hideElement("pinentrydiv");
                hideElement("btnConnect");
                hideElement("errordiv");
                hideElement("btnRetry");
            }
        
            function showError(errorString,errorDescriptionString, shouldShowRetry) {
                showElement("errordiv");
                if(shouldShowRetry) {
                    showElement("btnRetry");
                } else {
                    hideElement("btnRetry");
                }
                document.getElementById("errormessageheader").innerHTML = errorString;
                document.getElementById("errormessagedescription").innerHTML = errorDescriptionString;
                hideElement("pinentrydiv");
                hideElement("btnConnect");
                hideElement("loaderdiv");
            }

            function showPinEntry() {
                showElement("pinentrydiv");
                hideElement("loaderdiv");
                hideElement("errordiv");
                hideElement("btnRetry");
                updateText();
            }

            function connect() {
                location.href = "adbinapp://confirm?code=" + codestring;
            }

            function cancel() {
                location.href = "adbinapp://cancel?";
            }
            
            function retry() {
                showPinEntry();
            }

            function hideElement(elementId) {
                document.getElementById(elementId).style.display = "none";
            }

            function showElement(elementId) {
                document.getElementById(elementId).style.display = "inline-block";
            }
        </script>
                
    </body>
</html>
